<template>
  <div class="root-container">
    <div class="content">
      <el-alert title="根据城市的级别划分联创合伙人的限制额度，如果达到设置的人数，此类城市不能再加入新的联创合伙人" class="my-alert" type="info" :closable="false">
      </el-alert>
      <div class="form-box item-mart">
        <div class="form-item-left">
          <div style="font-size: 18px;font-weight: 600; color: #111;"> 一线城市招募 </div>
          <div style="font-size: 14px;color: #666; margin-top: 10px;"> 一线城市联创合伙人的人数限制 </div>
        </div>
        <div class="form-item-right">
          <el-input-number v-model="mode.one_town" :min="0" :max="20" label="描述文字"
            @change="handleChange('one_town')"></el-input-number>
        </div>
      </div>
      <div class="form-box item-mart">
        <div class="form-item-left">
          <div style="font-size: 18px;font-weight: 600; color: #111;"> 二线城市招募 </div>
          <div style="font-size: 14px;color: #666; margin-top: 10px;"> 二线城市联创合伙人的人数限制 </div>
        </div>

        <div class="form-item-right">
          <el-input-number v-model="mode.two_town" :min="0" :max="20" label="描述文字"
            @blur="handleChange('two_town')"></el-input-number>
        </div>
      </div>
      <div class="form-box item-mart">
        <div class="form-item-left">
          <div style="font-size: 18px;font-weight: 600; color: #111;"> 三线城市招募 </div>
          <div style="font-size: 14px;color: #666; margin-top: 10px;"> 三线城市联创合伙人的人数限制 </div>
        </div>
        <div class="form-item-right">
          <el-input-number v-model="mode.three_town" :min="0" :max="20" label="描述文字"
            @blur="handleChange('three_town')"></el-input-number>
        </div>
      </div>
      <div class="form-box item-mart">
        <div class="form-item-left">
          <div style="font-size: 18px;font-weight: 600; color: #111;"> 四线城市招募 </div>
          <div style="font-size: 14px;color: #666; margin-top: 10px;"> 四线城市联创合伙人的人数限制 </div>
        </div>

        <div class="form-item-right">
          <el-input-number v-model="mode.four_town" :min="0" :max="20" label="描述文字"
            @blur="handleChange('four_town')"></el-input-number>
        </div>
      </div>
      <div class="form-box item-mart">
        <div class="form-item-left">
          <div style="font-size: 18px;font-weight: 600; color: #111;"> 五线城市招募 </div>
          <div style="font-size: 14px;color: #666; margin-top: 10px;"> 五线城市联创合伙人的人数限制 </div>
        </div>
        <div class="form-item-right">
          <el-input-number v-model="mode.five_town" :min="0" :max="20" label="描述文字"
            @blur="handleChange('five_town')"></el-input-number>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        mode: {
          one_town: 0,
          two_town: 0,
          three_town: 0,
          four_town: 0,
          five_town: 0
        }
      };
    },
    mounted() {

      this.getCityConfig();

    },
    methods: {
      getCityConfig() {
        this.$httpRequest.get('/config/detail', {
          type: 'town_recruit'
        }).then(res => {
          if (res.code === 0 && Array.isArray(res.data)) {
            res.data.forEach(row => {
              if (row.key && Object.prototype.hasOwnProperty.call(this.mode, row.key)) {
                this.mode[row.key] = Number(row.value)
              }
            })
          }
        }).catch(e => {
          this.$message.error(e.message)
        })
      },
      handleChange(keyName) {
        let param = {
          type: 'town_recruit'
        }
        param.key = keyName
        param.value = this.mode[keyName]
        console.log('---------mode---------', this.mode)
        this.$httpRequest.post('/config/add', param).then(res => {
          if (res.code != 0 ) {
             this.$message.error('保存失败')
          }

        }).catch(e => {
          this.$message.error(e.message)
        });

      },
    }

  };
</script>

<style>
  .content {
    margin-top: 20px;
    padding: 30px;
    box-sizing: border-box;
    background-color: #fff;
  }

  .header-box {}

  .item-mart {
    margin-top: 30px;
  }

  .form-box {
    background-color: #f8f8f8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    padding: 20px 30px;
  }

  .form-item-left {}

  .my-alert {
    padding: 30px;
  }

  .my-alert .el-alert__title {
    font-size: 18px;

  }

  .el-alert--info {
    background-color: rgb(217, 237, 247) !important;
    border: rgb(188, 232, 241) !important;
    color: rgb(49, 112, 143) !important;
  }
</style>
